<template>
<div class="progressBar">
    <div class="bar">
        <div class="barContainer"></div>
    </div>
    <p class="barTopic">
        <em>已抢</em>
        <em>20</em>
        <em>%</em>
    </p>
</div>
</template>

<script>
export default {
    name: "ProgressBar"
}
</script>

<style scoped>
.progressBar {
    height: .3rem;
    width: 100%;
    display: -webkit-flex;
    display: flex;
    justify-content: space-between;

}

.bar {
    height: .3rem;
    width: 72%;
    background-color: #EAF7FF;
    border-radius: .15rem;

}

.barContainer {
    width: 40%;
    height: 100%;
    background: url('../../assets/image/home/homeActivity/load.png');
    border-radius: .15rem;
}

.barTopic {
    height: .3rem;
    width: 25%;

    color: #4AA4FC;
    font-size: .3rem;
    margin-left: 3%;
}
</style>
